import React, { Component } from "react";
import { observer } from "mobx-react";
import { Route, withRouter, Switch} from 'react-router-dom';
import { List, Accordion, Icon,Tools } from "weaver-mobile";
import { Form } from "weaver-mobile-page";
import { asyncComponent } from "react-async-component";
import Status from "../comStatus/comStatus";
import { Base64 } from "js-base64";
import { toJS } from "mobx";
import _ from "lodash";
const { FormItem } = List;
const getLabel = Tools.getLabel;
const coms = {
  ComreRichText: asyncComponent({
    resolve: () => import("../comreRichText/comreRichText.js")
  }),
  ComProgress: asyncComponent({
    resolve: () => import("../comProgress/comProgress.js")
  })
};
@withRouter
@observer
/*
 * @info: 渲染form表单组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 23-12-2019 16:46:05
 */
export default class ComForm extends Component {

  render() {
    const { comForm,subtasksIndex=0} = this.props;
    const { conditioninfo, isInit } = comForm;
    const fields = [];
    let richText = null;
    if (isInit) {
      //conditioninfo.forEach((group) => {
      //group.items.forEach((field) => {
      conditioninfo[subtasksIndex].items.forEach((field, index) => {
        if (field.conditionType === "RICHTEXT") {
          richText = this.getFormItem(field);
          fields.push(richText);
        } else if (field.domkey[0].startsWith("status")) {
          fields.push(<Status field={field} key={field.domkey.join("__")} />);
        } else if (field.domkey[0].startsWith("progress")) {
          fields.push(<coms.ComProgress key={field.domkey.join("__")} />);
        } else {
          fields.push(
            <Form.Item
              key={field.domkey.join("__")}
              form={comForm}
              fieldConfig={field}
              onChange={comForm.onChange}
            />
          );
        }
      });
      //fields.push(richText);
      //});
    }
    return <div className="g-comForm">{fields}</div>;
  }
/**
 * 获取Form.Item不能渲染的类型，例如richText
 * @method getFormItem
 * @for ComForm
 * @param {参数类型} {field} 参数说明  items.values()
 * @return {返回值类型} {richText}  返回值说明  自定义渲染后的form
 */
  getFormItem(field){
    let richText = null;
    const {history,match,comForm} = this.props,
          key = field.domkey.slice().join("__");
    if (_.has(field, "value")) {
      return (richText = (
        <div className="wm-form-item-wrap g-form-richText" key={key} >
          <input className="wm-form-item-input-hidden" id="g-richText" />
          <div className="am-list-form">
            <div className="am-list-form am-list-form-header ">
              <div className="am-list-title">{field.label}</div>
            </div>
            <div className="am-list-form-body border ">
              <div className="am-list-content ">
                <div>
                  <div className="am-picker-input g-placeholder" extra="请点击" onClick={() => history.push(`${match.url}/richtext/${key}`)}>
                      {getLabel("555","请点击")}
                    <div className="am-picker-input-value" />
                    <div className="am-picker-input-icon">
                      <Icon type="right" size={'lg'}/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <Switch>
              <Route path={`${match.path}/richtext/${key}`}  render={()=>{
                return <coms.ComreRichText field={field} hasBtns={false} domkey={key} comForm={comForm}/>
              }}/>
          </Switch>
          </div>
        </div>
      ));
    } else {
      return richText;
    }
  }
}
